fix: resolve dark mode flicker issue by AnkitRewar11 · Pull Request #7533 · layer5io/layer5

AnkitRewar11 · 2026-03-21T13:40:12Z

Description
This PR fixes #7443

This PR resolves the dark mode flicker issue. On page load, the theme
was not being applied before render which caused a visible flicker.
Updated ThemeManager.js, StyledThemeProvider.js, and onRenderBody.js
to properly handle theme initialization and prevent flash of unstyled
content (FOUC).

Notes for Reviewers

Updated ThemeManager.js to handle dark mode state properly
Updated StyledThemeProvider.js for consistent theme application
Updated onRenderBody.js to inject correct theme class before render
No new dependencies added
Only 3 files changed

Signed commits

Yes, I signed my commits.

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>

l5io · 2026-03-21T14:05:03Z

🚀 Preview for commit a5c4a7d at: https://69bea5593286e0c4d4ee82dc--layer5.netlify.app

YASHMAHAKAL

This is much better @AnkitRewar11, Good to merge !!

AnkitRewar11 · 2026-03-21T17:13:42Z

@YASHMAHAKAL Thank you so much for the review and support! 🙏
Really appreciate your guidance throughout this PR.
Looking forward to getting it merged! 😊

l5io · 2026-03-21T20:06:25Z

🚀 Preview for commit 8d09e77 at: https://69befa12ca8054dc493243ab--layer5.netlify.app

Bhumikagarggg · 2026-03-22T16:28:34Z

@AnkitRewar11 Want to merge this PR? Add it as an agenda item to the meeting minutes, if you would 🙂! Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST.

leecalcote · 2026-03-22T21:52:25Z

@@ -1,22 +1,16 @@
-//uses isDark state to choose styled-component theme (in themeStyles.js)
-//and use ThemeProvider to allow all styled components access to values via props.theme
-


Are these comments inaccurate or unhelpful?

If they are inaccurate because of the changes that you've made, then update what they say.

If they are not helpful, then update what they say.

leecalcote · 2026-03-22T21:53:27Z

-      // Apply to DOM immediately
      applyThemeToDOM(themeToApply);
-
-      // Persist to localStorage


Reinstate the comments.

leecalcote · 2026-03-22T21:54:40Z

Why was the existing approach completely ripped out and replaced?

What is precisely wrong with the current approach? Fix that.

If the current approach is completely offbase - ok - explain that and why a complete rewrite is needed.

@AnkitRewar11 can you answer this?

Hey @saurabhraghuvanshii, just wanted to clearly explain why the master branch approach was failing and how this PR fixes it.

I’ve only made a few focused fixes to solve the dark mode flicker issue:

Wrong Injection Placement: The script was running too late (inside ), so the page first showed light mode. I moved it to so the correct theme loads before anything is displayed.

Missing data-theme: The code wasn’t setting the data-theme attribute on the HTML root, which is needed for dark mode styles. I’ve added that.

SSR / Hydration Mismatch: The server knew the theme, but the frontend didn’t, so it defaulted to light mode and caused flicker. I fixed this by passing the theme (window.__theme) so both stay in sync.

JSON Parsing Issue: The previous way of parsing theme data could break if there were quotes in the string. I made it safer to avoid crashes.

Now the changes are minimal, clean, and focused and the flicker issue is completely resolved. I hope all your questions have been answered. If there’s anything else you’d like to know, please let me know.

leecalcote · 2026-03-22T21:59:12Z

@AnkitRewar11 without details as to where specifically we're failing in the current implementation, and without details as to how your completely new approach resolves the problem, we're flying blind - - and this doesn't work.

Refactor StyledThemeProvider to ensure consistent theme rendering for SSR. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Refactor theme handling logic in MagicScriptTag component. Update the way themes are injected into the document and change the function signature for onRenderBody. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Updated comments for clarity and added a fallback for SSR-injected CSS variables during hydration. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-23T07:01:32Z

🚀 Preview for commit 9ad62cb at: https://69c0e4f81e80d04a59c24468--layer5.netlify.app

l5io · 2026-03-23T07:51:22Z

🚀 Preview for commit 9736016 at: https://69c0f0bce6282fe4fa13bfa3--layer5.netlify.app

l5io · 2026-03-23T08:38:45Z

🚀 Preview for commit 42eab57 at: https://69c0fbc40e47164cd82d99e2--layer5.netlify.app

l5io · 2026-03-23T10:04:08Z

🚀 Preview for commit f00fabd at: https://69c10fd10e471689402d9987--layer5.netlify.app

… fixes with comments Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

YASHMAHAKAL · 2026-03-23T16:34:04Z

@AnkitRewar11 even this time you've responded to review with 5-6 new commits. and the description you post after your commits, it was even relevant to your first commit, and about diff's looking easy, they were much easy before : )

correct me if i'm wrong, Thanks for your efforts 👍

AnkitRewar11 · 2026-03-23T16:54:18Z

@AnkitRewar11 even this time you've responded to review with 5-6 new commits. and the description you post after your commits, it was even relevant to your first commit, and about diff's looking easy, they were much easy before : )

correct me if i'm wrong, Thanks for your efforts 👍

You were right my previous approach was also correct. But yesterday Lee suggested a few changes, like adding the comments again, and I’ve done that now.

As for the current approach, there isn’t much difference between the two. I just made minimal changes to the old code so that it’s easier to understand.

And regarding the new commits, I accidentally made the changes directly here instead of locally, so that’s why so many commits were created. Sorry about that.

rishiraj38 · 2026-03-28T15:40:54Z

+    const initialColorValue = (root.style.getPropertyValue("--initial-color-mode") || "").trim();
+    const actualTheme = window.__theme || initialColorValue || ThemeSetting.LIGHT;

-    // Get stored theme from localStorage


Please don’t remove the comments.

Hi @rishiraj38, I hope everything got added properly. I’ve added that one comment as you suggested.

l5io · 2026-03-31T12:35:32Z

🚀 Preview for commit 3a170b6 at: https://69cbbf473ddc3f5da4372c0f--layer5.netlify.app

rishiraj38 · 2026-03-31T18:06:21Z

@saurabhraghuvanshii, could you please take a look at this PR?

l5io · 2026-03-31T18:46:59Z

🚀 Preview for commit 00e3368 at: https://69cc166e700405aa29e3d071--layer5.netlify.app

l5io · 2026-04-02T10:47:16Z

🚀 Preview for commit 2dc387a at: https://69ce48ebf7b0d22bdba1b3a4--layer5.netlify.app

l5io · 2026-04-03T09:42:45Z

🚀 Preview for commit bc5a6da at: https://69cf8b5fc52dd1b6e3c3ee10--layer5.netlify.app

YASHMAHAKAL

good work btw, thanks @AnkitRewar11

YASHMAHAKAL · 2026-04-05T17:55:57Z

@AnkitRewar11 I'll encourage you to add this PR as an agenda item to the meeting minutes, if you would 🙂! Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST.

Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

arjunmehta-git · 2026-04-09T07:38:32Z

This has come a long way, @AnkitRewar11, and your detailed explanation of the four root causes (script placement in setPreBodyComponents vs setHeadComponents, missing data-theme attribute, window.__theme SSR handoff, and the JSON.parse crash risk) is exactly the kind of analysis that helps reviewers understand and trust the fix.

Since this has approvals from both @YASHMAHAKAL and @rishiraj38 on the current commit, and the core FOUC mechanism is well-explained, I'd like to see one final thing before this merges:

Manual FOUC verification — Please test by hard-refreshing the Netlify preview in both light and dark mode (with the mode stored in localStorage) and confirm there is no visible flash. A short screen recording or a "tested, no flicker observed" comment from a reviewer who verified the Netlify preview would close this out.

One process note for future PRs: responding to review feedback by pushing many small fixup commits makes the diff harder to follow. Consider squashing fixup commits locally (git rebase -i) before pushing so the history stays readable. It also makes it easier for reviewers to see the net effect of your changes.

Good work seeing this through.

AnkitRewar11 · 2026-04-09T09:28:42Z

This has come a long way, @AnkitRewar11, and your detailed explanation of the four root causes (script placement in setPreBodyComponents vs setHeadComponents, missing data-theme attribute, window.__theme SSR handoff, and the JSON.parse crash risk) is exactly the kind of analysis that helps reviewers understand and trust the fix.

Since this has approvals from both @YASHMAHAKAL and @rishiraj38 on the current commit, and the core FOUC mechanism is well-explained, I'd like to see one final thing before this merges:

Manual FOUC verification — Please test by hard-refreshing the Netlify preview in both light and dark mode (with the mode stored in localStorage) and confirm there is no visible flash. A short screen recording or a "tested, no flicker observed" comment from a reviewer who verified the Netlify preview would close this out.

One process note for future PRs: responding to review feedback by pushing many small fixup commits makes the diff harder to follow. Consider squashing fixup commits locally (git rebase -i) before pushing so the history stays readable. It also makes it easier for reviewers to see the net effect of your changes.

Good work seeing this through.

Thanks for the detailed review and guidance, @arjunmehta-git.

Currently, we are not using Netlify. I am waiting for the GitHub Actions Pages setup to be completed so I can provide final verification proof (screen recording or confirmation).

The FOUC-related changes have been tested locally, and no visible flash was observed. I will share final verification once the setup is ready.

Please let me know if anything else should be validated before merge. Appreciate the feedback and support. 🫡🙏

LGTM!1

github-actions bot added the area/core-styles label Mar 21, 2026

fix: resolve dark mode flicker issue

a5c4a7d

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from 68be4fd to a5c4a7d Compare March 21, 2026 13:49

AnkitRewar11 mentioned this pull request Mar 21, 2026

Dark mode flicker — white background appears briefly before theme loads #7443

Closed

CodexRaunak requested a review from YASHMAHAKAL March 21, 2026 14:13

YASHMAHAKAL approved these changes Mar 21, 2026

View reviewed changes

Merge branch 'master' into fix/dark-mode-flicker-clean

8d09e77

Bhumikagarggg requested a review from saurabhraghuvanshii March 22, 2026 17:11

leecalcote requested changes Mar 22, 2026

View reviewed changes

leecalcote reviewed Mar 22, 2026

View reviewed changes

leecalcote previously requested changes Mar 22, 2026

View reviewed changes

AnkitRewar11 added 5 commits March 23, 2026 11:55

Update StyledThemeProvider for SSR theme consistency

c78a6f9

Refactor StyledThemeProvider to ensure consistent theme rendering for SSR. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Merge branch 'master' into fix/dark-mode-flicker-clean

7642946

Refactor ThemeManager for improved theme handling

21df90e

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Refactor StyledThemeProvider with improved comments

9ad62cb

Updated comments for clarity and added a fallback for SSR-injected CSS variables during hydration. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch 2 times, most recently from 2048e58 to 42eab57 Compare March 23, 2026 08:22

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from 42eab57 to f00fabd Compare March 23, 2026 09:48

chore: restore original onRenderBody structure and apply precise FOUC…

f60787a

… fixes with comments Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from f00fabd to f60787a Compare March 23, 2026 10:22

AnkitRewar11 requested a review from leecalcote March 24, 2026 05:37

rishiraj38 reviewed Mar 28, 2026

View reviewed changes

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from 72c475b to 3a170b6 Compare March 31, 2026 12:18

AnkitRewar11 requested a review from rishiraj38 March 31, 2026 12:19

rishiraj38 approved these changes Apr 3, 2026

View reviewed changes

rishiraj38 suggested changes Apr 3, 2026

View reviewed changes

Comment thread onRenderBody.js Outdated

Comment thread src/theme/app/ThemeManager.js Outdated

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from 2dc387a to bc5a6da Compare April 3, 2026 09:27

AnkitRewar11 requested a review from rishiraj38 April 4, 2026 19:36

rishiraj38 requested a review from YASHMAHAKAL April 4, 2026 19:38

YASHMAHAKAL reviewed Apr 5, 2026

View reviewed changes

Comment thread src/theme/app/StyledThemeProvider.js

YASHMAHAKAL reviewed Apr 5, 2026

View reviewed changes

Comment thread onRenderBody.js

YASHMAHAKAL reviewed Apr 5, 2026

View reviewed changes

add one more comment

4491cc1

Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from bc5a6da to 4491cc1 Compare April 5, 2026 20:48

YASHMAHAKAL approved these changes Apr 6, 2026

View reviewed changes

rishiraj38 approved these changes Apr 7, 2026

View reviewed changes

Merge branch 'master' into fix/dark-mode-flicker-clean

b73d447

saurabhraghuvanshii approved these changes Apr 10, 2026

View reviewed changes

saurabhraghuvanshii merged commit 1f6034d into layer5io:master Apr 10, 2026
4 checks passed

		@@ -1,22 +1,16 @@
		//uses isDark state to choose styled-component theme (in themeStyles.js)
		//and use ThemeProvider to allow all styled components access to values via props.theme

Conversation

AnkitRewar11 commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Mar 21, 2026

Uh oh!

YASHMAHAKAL left a comment

Choose a reason for hiding this comment

Uh oh!

AnkitRewar11 commented Mar 21, 2026

Uh oh!

l5io commented Mar 21, 2026

Uh oh!

Bhumikagarggg commented Mar 22, 2026

Uh oh!

leecalcote Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

leecalcote Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

leecalcote Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

saurabhraghuvanshii Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

AnkitRewar11 Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

leecalcote commented Mar 22, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

YASHMAHAKAL commented Mar 23, 2026

Uh oh!

AnkitRewar11 commented Mar 23, 2026

Uh oh!

rishiraj38 Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnkitRewar11 Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

l5io commented Mar 31, 2026

Uh oh!

rishiraj38 commented Mar 31, 2026

Uh oh!

l5io commented Mar 31, 2026

Uh oh!

l5io commented Apr 2, 2026

Uh oh!

Uh oh!

Uh oh!

l5io commented Apr 3, 2026

Uh oh!

Uh oh!

Uh oh!

YASHMAHAKAL left a comment

Choose a reason for hiding this comment

Uh oh!

YASHMAHAKAL commented Apr 5, 2026

Uh oh!

arjunmehta-git commented Apr 9, 2026

Uh oh!

AnkitRewar11 commented Apr 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

AnkitRewar11 commented Mar 21, 2026 •

edited

Loading

rishiraj38 Mar 28, 2026 •

edited

Loading

AnkitRewar11 Mar 31, 2026 •

edited

Loading